<!-- 指导页 -->
<template>
	<view>
		<!-- 整体 -->
		<view class="entirety">
			<!-- 广告轮播图 -->
			<swiper :indicator-dots="flase" :autoplay="true" :interval="3000" :duration="1000" :circular="true">
				<swiper-item class="swiper-item" v-for="item in advert" :key="item.id">
					<image :src="item.src" :mode="aspectFill"></image>
				</swiper-item>
			</swiper>
			<!-- 中间的椭圆 -->
			<view class="Oval" v-show="isadvirt"></view>
			<!-- 下方指示区域 -->
			<view :class="isadvirt?'indicate':'indicates'">
				<!-- 指导文字 -->
				<view class="guide">{{guideText()}}</view>
				<text class="guide-tex">Semper in cursus magna et eu varius nunc adipiscing.
					Elementum justo, laoreet id semiru forigive you.
				</text>
				<!-- 指导区域控制样式内容的按钮 -->
				<button class="guide-btn" @click="Negate()">{{guide===4?'welcome':'next'}}</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				guide: 1, //控制指导文字展示内容
				isadvirt: true, //控制下方区域展示样式
				// 广告数据
				advert: [{
					id: '01',
					src: 'https://bpic.588ku.com/back_pic/05/85/90/735c7f79924972f.jpg'
				}, {
					id: '02',
					src: 'https://669pic-img-server-02.oss-cn-hongkong.aliyuncs.com/ele_banner2/e1aa76dd417c9d4fcc9f465923e2947b.jpg'
				}, {
					id: '03',
					src: 'https://img.shetu66.com/2024/02/29/170919206468190345.png'
				}, {
					id: '04',
					src: 'https://img.shetu66.com/2024/02/29/170919199969423047.png'
				}]
			}
		},
		methods: {
			//控制指示区域的样式
			Negate() {
				this.$data.isadvirt = false;
				if (this.$data.guide < 4) {
					this.$data.guide++
				} else if (this.$data.guide === 4) {
					uni.switchTab({
						animationDuration:300,
						animationType:'pop-in',
						url: "/pages/index/index"
					})
				}
			},
			//指导文字展示数据
			guideText() {
				const texts = {
					1: '跨越山海，遇见未知的精彩！',
					2: '一键启程，让世界成为你的风景！',
					3: '旅行不设限，每一站都是新故事！'
				};
				return texts[this.guide] || '出发即自由，探索即人生！';
			}
		}
	}
</script>

<style scoped>
	/* 整体样式 */
	page {
		overflow: hidden !important;
		height: 100vh !important;
	}

	.entirety {
		width: 100vw;
		height: 100vh;
	}

	/* 广告轮播图样式 */
	swiper {
		width: 100%;
		height: 60%;
	}

	.swiper-item {
		width: 100%;
		height: 60%;
	}

	image {
		width: 100%;
		height: 100%;
	}

	/* 中间的椭圆 */
	.Oval {
		width: 100%;
		height: 8%;
		background-color: white;
		border-radius: 50%;
		position: absolute;
		bottom: 36%;
	}

	/* 下方指示区域 */
	.indicate {
		width: 100%;
		height: 40%;
		padding-top: 8%;
		background-color: white;
		text-align: center;
	}

	.indicates {
		width: 100%;
		height: 40%;
		padding-top: 8%;
		text-align: center;
		background-color: #eeeef0;
	}

	/* 指导文字样式 */
	.guide {
		width: 90%;
		font-size: 25px;
		margin-left: 5%;
		padding-bottom: 10px;
	}

	.guide-tex {
		width: 90%;
		padding-top: 20px;
		margin-left: 5%;
		font-size: 12px;
	}

	/* 指导区域控制样式内容的按钮的样式 */
	.guide-btn {
		width: 50%;
		background-color: #2196f3;
		position: absolute;
		bottom: 8%;
		left: 50%;
		margin-left: -25%;
	}
</style>